<template>
  <div class="hello">
    <p>{{msg}}</p>
    <p>1. 子元素事件  点击子元素按钮，触发事件，调用父元素方法</p>
    <ChildComponent01 title="你好啊" @myEvent="eventHandler"/>

    <p>2. 子元素事件  传参</p>
    <ChildComponent02 title="你好啊" @myEvent02="eventHandler02"/>

    <p>3. 元素传参  input  change   v-model (回车时触发事件)</p>
    <ChildComponent03 @myEvent="eventHandler03" />

    <p>4. 监听器  watch</p>
    <ChildComponent04 @myEvent="eventHandler04" />

    <p>5. 插槽</p>
    <SlotComponent>
      <div>
        我就是插槽
      </div>
    </SlotComponent>

    <p>6. 编译作用域</p>
    <SlotComponent>
      <div>
        {{ showVal }}
      </div>
    </SlotComponent>

    <p>7. slot 可以设置默认内容（后备内容）</p>
    <SlotComponent/>

    <p>8. 具名插槽（设置插槽名称，则可以插入多个template数据）</p>
    <SlotComponent02>
      <template v-slot:n1>
        n1实际内容
      </template>

      <template v-slot:n2>
        n2实际内容
      </template>

      <div>
        我是没有名字的插槽
      </div>
    </SlotComponent02>

    <p>9. 插槽  子组件提供数据，由父组件提供格式</p>

    <SlotComponent03>
      <template v-slot:default="slotProps">
        <div>插槽子组件的数据内容：{{slotProps.msg}}</div>
      </template>

      <template #n1="slotProps">
        <div>插槽子组件的数据内容：{{slotProps.msg}}</div>
        <p>ps：v-slot: 可以被缩写为#</p>
      </template>
    </SlotComponent03>

  </div>
</template>

<script>
import ChildComponent01 from "./child/ChildComponent01";
import ChildComponent02 from "./child/ChildComponent02";
import ChildComponent03 from "./child/ChildComponent03";
import ChildComponent04 from "./child/ChildComponent04";
import SlotComponent from "./child/SlotComponent";
import SlotComponent02 from "./child/SlotComponent02";
import SlotComponent03 from "./child/SlotComponent03";
export default {
  name: 'HelloWorld',
  components: {
    SlotComponent03,
    SlotComponent02, SlotComponent, ChildComponent04, ChildComponent03, ChildComponent02, ChildComponent01},
  data () {
    return {
      msg: 'Hello 你好',
      showVal: "编译作用域： 在哪里写，就在哪里声明，插槽往子组件传承"
    }
  },
  methods: {
    //无参数的事件调用
    eventHandler() {
      console.log("子元素事件");
    },
    //有参数的事件调用
    eventHandler02(data) {
      console.log(data);
    },
    eventHandler03(data) {
      console.log(data);
    },
    eventHandler04(data) {
      console.log("监听器显示消息：" + data)
    }
  }
}
</script>

<style scoped>
  p {
    color: red;
  }
</style>
